<template>
  <div class="app-container">
    <pro-table
      ref="pageBox"
      title="财务记录"
      :request="getList"
      :columns="columns"
      :search="searchObj"
    >
      <template #toolbar>
        <el-button type="primary" @click="$router.push('/account/recharge')">
          充值
        </el-button>
      </template>
      <template #money-label>金额（CNY）</template>
      <template #date="{ row }">
        {{ row.createTime | parseTime }}
      </template>
    </pro-table>
  </div>
</template>
<script>
export default {
  name: 'Finance',
  data() {
    return {
      columns: [
        {
          label: '方向',
          prop: 'direction',
        },
        {
          label: '类型',
          prop: 'type',
        },
        {
          label: '金额',
          labelSlot: 'money-label',
          prop: 'money',
        },
        {
          label: '备注',
          prop: 'desc',
        },

        {
          label: '创建时间',
          tdSlot: 'date',
          align: 'center',
          width: 160,
        },
      ],
      searchObj: {
        inputWidth: '200px',
        fields: [
          {
            type: 'select',
            label: '',
            name: 'type',
            placeholder: '方向',
            options: [
              {
                value: 'INCOME',
                name: '收入',
              },
              {
                value: 'EXPENSE',
                name: '支出',
              },
            ],
          },

          {
            type: 'text',
            label: '',
            name: 'keyword',
            placeholder: '备注',
          },
        ],
      },
    }
  },

  methods: {
    async getList(params) {
      const { code, data } = await new Promise(resolve => {
        setTimeout(() => {
          resolve({
            code: 0,
            data: {
              list: [],
              total: 100,
            },
          })
        }, 500)
      })
      if (+code === 200) {
        return {
          data: data.list,
          total: +data.total,
        }
      }

      return {
        data: [],
        total: 0,
      }
    },
  },
}
</script>
<style lang="scss" scoped></style>
